<template>
  <div class="bg">
    <nav-com
        title="能赚钱的5G小店"
        :showView='showView'
        @back="backHandler()"
    >
<!--      <div class="right" style="display: flex;justify-content: center;align-items: center;height: 90%;" slot="right">-->
<!--        <img src="../../assets/addshop.png" alt="" style="width: 7.2vw;height: 7.2vw;">-->
<!--      </div>-->
    </nav-com>
    <van-pull-refresh
          v-model='isLoading'
      >
        <div
            v-if='list.length == 0'
            class="empty"
        >
          <img src='../../assets/t4.png'>
          <p>您还没有商品哦~</p>
        </div>
        <div
            v-else
            v-for="(good,goodIndex) in list"
            :key="goodIndex"
            class="orders_list"
        >
          <div
              class="order_box"
              @click="toshopDetail(good.id)"
          >
            <img class="yushou" src="../../assets/myserive/yushou.png" alt="">
            <img :src="good.image">
            <div style="    width: 100%;">
              <p style="width: 90%;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical">{{good.title}}</p>
              <div style="font-size:12px; display: flex;justify-content: space-between;align-items: center;    margin: 6px 0; padding-left: 4vw;">
                <span style="background: #F7F9FB;border-radius: 13px;color: #F14537;display: flex;justify-content:center;align-items:center;font-size: 12px">赚￥{{good.share_money }}</span>
                <span  style="background: #F7F9FB;border-radius: 13px;margin-left: 5px;display: flex;justify-content:center;align-items:center;font-size: 12px;color: #000">{{good.share +'%佣'}}</span>
                <div class="order_bottom">已售：{{good.sales +'件'}}</div>
              </div>
              <div style="display: flex;align-items: center;justify-content: space-between">
                <div style="font-size: 14px;font-weight: 700;padding-left: 4vw;">售价：￥{{good.price }}</div>
                <div
                    @click.stop='confirmHanlder(good.id,good)'
                    style="    padding: 7px 12px;background: #FE4B20;border-radius: 4px;margin-right: 11px; color:#FFF;font-size: 12px"
                >立即分享</div>
              </div>
            </div>
          </div>
        </div>
      </van-pull-refresh>
    <van-popup
        v-model="cancelReason"
        position="bottom"
        :style="{ height: '55%' }"
    >
      <div class="popup">
        <div class="popup-title">取消订单</div>
        <div class="popup-tip">
          <p>温馨提示：</p>
          <p>1、限时特价、预约资格等购买优惠可能一并取消</p>
          <p>2、订单一旦取消，无法恢复</p>
          <p>3、其他规定</p>
        </div>
        <div class="cancel-reason">
          <div class="cancel-title">请选择取消订单的原因（必选）：</div>
          <van-radio-group
              v-model="radio"
              @change='radioChange'
          >
            <van-radio
                :name="item.title"
                checked-color="#FE4B20"
                v-for="item in cancelReasonList"
                :key="item.name"
                class="list"
            >{{item.title}}</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div
          class="popup-button"
          @click="cancelSubmit"
      >提交</div>
    </van-popup>
    <!-- 分享二维码 -->
    <div class="shareboxbg"  v-show="showSharetu">
      <div class="sharebox">
        <div class="shareTU">
          <div class="tu">
            <img :src="details.image">
          </div>
          <div class="price">
            <span class="t00">¥{{details.price}}</span>
          </div>
          <div class="name">{{details.title}}</div>
          <div class="ewm">
            <img :src="img_url">
            <span>长按或扫描二维码查看详情</span>
          </div>
        </div>
        <div class="shareStyList">
          <div class="t0">分享当前图片到</div>
          <div class="styList">
            <div class="item" @click.stop="togo(1)">
              <img src="@/assets/friendShare/tu1.png">
              <span>微信好友</span>
            </div>
            <div class="item" @click.stop="togo(2)">
              <img src="@/assets/friendShare/tu2.png">
              <span>朋友圈</span>
            </div>
            <div class="item" @click.stop="togo(3)">
              <img src="@/assets/friendShare/tu3.png">
              <span>保存海报</span>
            </div>
            <div class="item" @click.stop="togo(4)">
              <img src="@/assets/friendShare/tu4.png">
              <span>复制链接</span>
            </div>
          </div>
          <div class="cancle" @click.stop="share_close"> 取消</div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import {
  getOrders,
  goodslistUser,
  cancelOrderApi,
  putselfWithdrawal,
  orderConfirm,
  qrcodegoods,
  userInfo5G
} from "@/api/api";
import navCom from "@/component/nav";
import { Toast } from "vant";
export default {
  name: "orders",
  components: {
    navCom,
  },
  data() {
    return {
      radio: "",
      cancelReason: false,
      cancelReasonList: [
        { name: 0, title: "不想要了" },
        { name: 1, title: "地址填写错误" },
        { name: 2, title: "商品降价" },
        { name: 3, title: "商品错选/多选" },
      ],
      uid: weixin.getUserId(),
      showView: true,
      active: 1,
      tabList: [
        { id: 0, title: "待支付" },
        { id: 1, title: "待发货" },
        { id: 2, title: "待收货" },
        { id: 3, title: "已完成" },
      ],
      list: [],
      isLoading: false,
      shop_id:5,
      showSharetu:false,//分享控制
      img_url:'',
      h5_url:'',
      post_url:'',
      details:{}
    };
  },
  filters: {
    /*
        时间格式自定义 只需把字符串里面的改成自己所需的格式
        */
    formatDateTime: function (date) {
      var date = new Date(date * 1000);
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var Hours = date.getHours();
      if (Hours >= 0 && Hours <= 9) {
        Hours = "0" + Hours;
      }
      var Minutes = date.getMinutes();
      if (Minutes >= 0 && Minutes <= 9) {
        Minutes = "0" + Minutes;
      }
      var Seconds = date.getSeconds();
      if (Seconds >= 0 && Seconds <= 9) {
        Seconds = "0" + Seconds;
      }
      var currentDate =
          date.getFullYear() +
          "-" +
          month +
          "-" +
          strDate +
          " " +
          Hours +
          ":" +
          Minutes +
          ":" +
          Seconds;
      return currentDate;
    },
  },
  // activated() {
  //   this.active = this.$route.params.typeNum || 0;
  //   this.childActive(this.active);
  // },
  mounted() {
    let i_active = Number(this.$route.params.num) || 0;
    if(i_active==3){
      this.active = 2
    }else if(i_active==2){
      this.active = 3
    }else{
      this.active = i_active
    }
    console.log('ordersNo', this.active)
    this.childActive(this.active);
  },
  methods: {
    toshopDetail(item){
      this.$router.push({
        name: "sharegoodDetails",
        params: {
          id: item,
          type:'5Gyingxiao'
        },
      });
    },
    toShares() {
      this.$router.push({ name: "shares" });
    },
    radioChange(name) {
      console.log(this.radio);
    },
    share_close(){
      this.showSharetu = false;
    },
    //返回
    backHandler() {
      if (weixin.isAndroid()) {
        window.JS_TROOPS.goBack();
      } else {
        this.$router.go(-1);
      }
    },
    //初始化
    init() {
      this.getDataHanlder("nopay");
    },
    // 申请处理=转户，退货
    applyHandle(data) {
      if (data.day == 2) {
        this.changeUser(data);
      } else {
        this.returnOrder(data);
      }
    },
    // 申请转户
    changeUser(data) {
      this.$router.push({
        name: "orderChangeUser",
        params: { orderId: data.id },
      });
    },
    //获取数据
    getDataHanlder() {
      userInfo5G({token5g:localStorage.getItem("token5g"),}).then((res) => {
        if (res.data.code == 1) {
          this.shop_id = res.data.data.shop_id;
          let data = {
            page: 1,
            per_page: 50,
            token:localStorage.getItem("token5g"),
            shop_id: this.shop_id,
          };
          // data.goodsTypeList = 'zj4399,zj4799,zj4999,zj2w,zj3w,v15p4199,i18p4899,v16p4399,k9p6499,vk19p5999'
          goodslistUser(data).then((res) => {
            console.log("goodslistUser", res);
            if (res.data.code == 1) {
              this.list = res.data.data.data;
            } else {
              this.$dialog.alert({
                message: res.data.msg,
              });
            }
          });
        }
      });

    },
    //切换
    childActive(val) {
      console.log(121212, val)
      // 未发货nosend 已发货noget 待评价 nocomment 售后aftersale
      if (val == 0) {
        this.getDataHanlder("nopay");
      } else if (val == 1) {
        this.getDataHanlder("nosend");
      } else if (val == 2) {
        this.getDataHanlder("noget");
      } else if (val == 3) {
        this.getDataHanlder("finish");
      }
    },
    //已自提
    selfOrderaHandler(id) {
      putselfWithdrawal({ id: id }).then((res) => {
        if (res.data.code == 200) {
          this.getDataHanlder(1);
          this.$dialog.alert({
            message: "恭喜您，收到货物啦~",
          });
        } else {
          this.$dialog.alert({
            message: res.data.msg,
          });
        }
      });
    },
    togo(type){
      if(type==1){
        window.JS_TROOPS.weixinShare(this.post_url);
      }else if(type==2){
        window.JS_TROOPS.weixinCircleFriends(this.post_url);
      }else if(type==3){
        window.JS_TROOPS.downloadImage(this.post_url);
      }else if(type==4){
        this.copy(this.h5_url)
      }
    },
    copy(content){
      const inputDom = document.createElement('input');
      inputDom.setAttribute('value', content);
      document.body.appendChild(inputDom);
      inputDom.select();
      document.execCommand('copy');
      document.body.removeChild(inputDom);
      Toast("复制成功")
    },
    //分享案例
    confirmHanlder(id,goodInfo) {
      if(localStorage.getItem("token5g")){
        // Toast('二维码分享页面展示')
        let index = window.location.href.toString().indexOf('/#/');
        let yuming = window.location.href.toString().substring(0,index);
        this.details = goodInfo;
        qrcodegoods({
          link:yuming,
          token:localStorage.getItem("token5g"),
          goods_id:id
        }).then((res) => {
          this.showtank=false;
          this.showSharetu=true;
          console.log("二维码分享",res.data)
          this.img_url =res.data.data.img_url
          this.h5_url= res.data.data.h5_url
          this.post_url = res.data.data.poster_url
        });
      }else{
        if(this.$is_weixn){
          this.$router.push('/register_weixin')
        }else{
          this.$router.push('/login')
        }
      }

    },
    // 取消订单
    cancelOrder(data) {
      this.cancelId = data.id;
      this.$dialog
          .alert({
            title: "取消订单",
            message: "您确认要取消该订单吗？订单取消后 只能再次重新购买。",
            showCancelButton: true,
            confirmButtonText: "取消订单",
            cancelButtonText: "我再想想",
          })
          .then(() => {
            this.cancelReason = true;
          });
    },
    cancelSubmit() {
      let quertData = {
        id: this.cancelId,
        cancel_count: this.radio,
      };
      this.cancelReason = false;
      cancelOrderApi(quertData).then((res) => {
        if (res.data.code == 1) {
          console.log(666666666666);
          this.childActive(this.active);
        }
        Toast(res.data.msg);
      });
    },
  },
};
</script>
<style scoped>
p {
  padding: 0;
  margin: 0;
}
.bg {
  background: #f1f3f6;
  min-height: 100vh;
}
.orders_list {
  background: #fff;
  position: relative;
  margin: 4vw;
  border-radius: 10px;
}
.order_box_title {
  height: 9.3vw;
  font-size: 3.2vw;
  padding-left: 2.93vw;
  line-height: 9.3vw;
  color: #999;
  border-bottom: 1px solid #EEEEEE;
}
.order_box {
  display: flex;
  padding-bottom: 10px;
  position: relative;
}
.order_box img {
  width: 24vw;
  height: 24vw;
  padding-top: 3.3vw;
  padding-left: 2.93vw;
}
.order_box p {
  padding-left: 4vw;
  padding-top: 3.3vw;
  color: #333;
}
.order_box span {
  padding: 4px 8px;
  display: block;
  color: #ff0000;
  font-size: 18px;
}
.order_bottom {
  padding: 2vw 2.93vw;
  color: #808080;
  font-size: 13px;
}
.order_ab {
  position: absolute;
  right: 4vw;
  bottom: 17vw;
  width: 22.66vw;
  height: 7vw;
  line-height: 7vw;
  text-align: center;
  border-radius: 1.3vw;
  font-size: 3.2vw;
  background: #fe4b20;
  color: #fff;
}
.empty {
  margin-top: 29.33vw;
  text-align: center;
}
.empty img {
  width: 54.4vw;
  height: 37.6vw;
}
.empty p {
  font-size: 3vw;
  color: #333;
  margin-top: 4vw;
}
.popup {
  margin: 5vw 6vw;
}
.popup-title {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  margin: 2vw 0;
}
.popup-tip {
  background: #f9f9f9;
  padding: 3vw;
  line-height: 7vw;
  color: #737373;
}
.cancel-reason {
  line-height: 15vw;
}
.cancel-reason .cancel-title {
  font-size: 18px;
}
.cancel-reason .list {
  margin: 2vw 0;
  color: #737373 !important;
}
.van-radio__label {
  color: #737373 !important;
}
.popup-button {
  height: 5vh;
  background: #fe4b20;
  color: #fff;
  font-size: 20px;
  width: 80vw;
  margin: 0vh auto;
  line-height: 5vh;
  text-align: center;
  border-radius: 2.5vh;
}
.van-tabs__nav--line {
  width: 100vw;
}
.back_box {
  background: #fff !important;
}
.dfk{
  display: flex;
  background-image: url('../../assets/ddfk.png');
  background-repeat: no-repeat;
  background-size: 135px 20px;
  min-width: 135px;
  background-position: center center;
  justify-content: flex-end;
  font-size: 10px;
  padding-right: 10px;
  color: #FE4B20;
}
.order_box .yushou{
  position: absolute;
  top: -20px;
  left: -16px;
  width: 60px;
  height: 60px;
}
.shareboxbg{
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.sharebox .shareTU{
  background: #ffffff;
  height: 325px;
  width: 250px;
  padding: 10px;
  border-radius: 12px;
  z-index: 10;
  position: absolute;
  bottom: 170px;
  left: calc(50% - 135px);
}
.sharebox .shareTU .tu img{
  width: 250px;
  max-height: 130px;
}
.sharebox .shareTU  .price{
  margin: 10px 0;
}
.sharebox .shareTU  .price .t00{
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FA2C1E;
  line-height: 25px;
  margin-right: 10px;

}
.sharebox .shareTU  .price .t01{
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 21px;
  text-decoration: line-through;

}
.sharebox .shareTU .name{
  font-size: 15px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 21px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;

}
.sharebox .shareTU .ewm {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sharebox .shareTU .ewm img{
  width: 77px;
  margin-bottom: 10px;
}
.sharebox .shareTU .ewm span{
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 17px;
  display: block;
}
.shareStyList{
  clear: both;
  height: 150px;
  background: #F5F5F5;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  text-align: center;
  padding-top: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9;
}
.shareStyList .t0{
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 18px;
}
.styList{
  display: flex;
  justify-content: space-evenly;
  padding: 10px 0 15px;
}
.styList .item{

}
.styList .item img{
  width: 50px;

}
.styList .item span{
  font-size: 11px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 16px;
  display: block;
}
.shareStyList .cancle{
  background: #FFFFFF;
  line-height: 43px;
}
</style>
